<!-- 交友 -->
<template>
	<view class="make-friends">
		<HeadUtils :activeVal="1" @selectItemFn="selectItemFn" :curHeadItem='2' />
		<view class="main-box">
			<scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="banner-box">
					<van-swipe :autoplay="3000" lazy-render>
						<van-swipe-item v-for="image in state.banerList" :key="image.ID"
							@click="jumpFn(image.AndroidPath)">
							<img :src="image.ImgUrl" />
						</van-swipe-item>
					</van-swipe>
				</view>
				<view class="square-item-box" v-for="item in state.listData" :key="item.ID">
					<SquareItem @on-praise="onPraise" :dataItem="item"></SquareItem>
				</view>
				<Empty v-if="state.listData.length == 0" title="暂无数据"></Empty>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from "vue"
	import HeadUtils from "@/pages/home/components/headUtils/index.vue"
	import SquareItem from "@/pages/home/components/squareItem/index.vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import {
		TrendFollow, // 关注
		Trend, // 推荐
		TrendNearby, //附近
		getBanner, // 获取banner
	} from "@/api/list/index.js"

	import {
		UserLocation
	} from "@/api/user/index.js"

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		scrollTop: 0,
		types: 2,
		listData: [],
		PageIndex: 1,
		PageSize: 20,
		UserId: getAuthorization("userId"),
		banerList: []
	})

	const upper = (e) => {}
	const lower = (e) => {
		state.PageIndex++
		if (state.types == 1) TrendFollowFn()
		if (state.types == 2) TrendFn()
		if (state.types == 3) TrendNearbyFn()
	}
	const scroll = (e) => {}

	//点赞
	const onPraise = (id) => {
		let curIndex = state.listData.findIndex(o => o.ID == id)
		state.listData[curIndex].IsLike = !state.listData[curIndex].IsLike
		if (state.listData[curIndex].IsLike) {
			state.listData[curIndex].LikeCount++
		} else {
			state.listData[curIndex].LikeCount--
		}
	}

	// 获取banner
	const getBannerFn = async () => {
		let data = await proxy.$get(getBanner)
		if (data.code == 200) {
			state.banerList = data.data
		}
	}

	// 获取定位uj
	const getAddress = () => {

	}

	const selectItemFn = (val) => {
		state.types = val
		state.PageIndex = 1
		state.PageSize = 20
		state.listData = []
		if (state.types == 1) TrendFollowFn()
		if (state.types == 2) TrendFn()
		if (state.types == 3) TrendNearbyFn()
	}

	// 关注
	const TrendFollowFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			UserId: state.UserId
			// CityCode:"110100",
			// Latitude:39.90403,
			// Longitude:116.407526,
		}
		uni.showLoading({
			title: '加载中'
		})
		let data = await proxy.$get(TrendFollow, params)
		uni.hideLoading()
		state.listData = state.listData.concat(data.data)
	}


	// 推荐
	const TrendFn = async () => {
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			UserId: state.UserId
			// CityCode:"110100",
			// Latitude:39.90403,
			// Longitude:116.407526,
		}
		uni.showLoading({
			title: '加载中'
		})
		let data = await proxy.$get(Trend, params)
		uni.hideLoading()
		state.listData = state.listData.concat(data.data)

	}

	// 附近
	const TrendNearbyFn = async () => {
		let curPosition = getAuthorization('curPosition')
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			// CityCode:"110100",
			// Latitude: curPosition.lat ? curPosition.lat : 39.90403,
			// Longitude: curPosition.lng ? curPosition.lng : 116.407526,
		}
		uni.showLoading({
			title: '加载中'
		})
		let data = await proxy.$get(TrendNearby, params)
		uni.hideLoading()
		state.listData = state.listData.concat(data.data)

	}

	const jumpFn = (path) => {
		if (path == '/home/route/MemberCenterActivity') {
			uni.navigateTo({
				url: "/pages/home/person/openMemberPage/index"
			})
		}
	}

	onMounted(() => {
		AMap.plugin('AMap.CitySearch', function() {
			var citySearch = new AMap.CitySearch()
			citySearch.getLocalCity(async function(status, result) {
				if (status === 'complete' && result.info === 'OK') {
					let params = {
						"code": result.adcode,
						"locationText": result.city,
						"longitude": result.bounds.northEast.lng,
						"latitude": result.bounds.northEast.lat
					}
					let data = await proxy.$put(UserLocation(getAuthorization('userId')),
						params)
					state.formData.locationText = result.city
					state.formData.longitude = result.bounds.northEast.lng
					state.formData.latitude = result.bounds.northEast.lat
					TrendFollowFn()
					// 查询成功，result即为当前所在城市信息
				} else {
					TrendFollowFn()
					uni.showToast({
						title: "地址获取失败",
						icon: "none"
					})
				}
			})
		})
		// TrendFollowFn()
		getBannerFn()
		getAddress()
		TrendFn()
	})
</script>

<style lang="scss" scoped>
	.main-box {
		width: 100vw;
		position: fixed;
		top: 120rpx;
		bottom: 100rpx;
	}

	.scroll-Y {
		height: 100%;
	}

	:deep(.header-tab-item-cur) {
		color: #333 !important;
	}

	.banner-box {
		margin: 0 30rpx;

		img {
			width: 100%;
		}
	}
</style>
